<template>
    <basic-container>
        <div class="header-container">
            <TitleComponent mainTitle="内部用户" subTitle="列表" />
            <el-button type="primary" class="add-button" @click="handleAdd">新增</el-button>
        </div>
        <avue-crud :option="option" :table-loading="crudData.loading" :data="crudData.data" :page.sync="crudData.page"
            v-model="crudData.form" ref="crud" @on-load="onLoad">

            <template #menu="{ row }">
                <el-dropdown @command="(command) => handleCommand(command, row)">
                    <span class="el-dropdown-link">┇</span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item command="edit">编辑</el-dropdown-item>
                            <el-dropdown-item command="delete">删除</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </template>
        </avue-crud>


        <!-- 确认删除对话框 -->
        <!-- <el-dialog title="确认删除" v-model="confirmDeleteVisible" width="30%" @close="handleDeleteCancel">
            <span>确定要删除该记录吗？</span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="handleDeleteCancel">取消</el-button>
                <el-button type="primary" @click="handleDeleteConfirm">确认</el-button>
            </span>
        </el-dialog> -->



        <el-dialog v-model="confirmDeleteVisible" @close="handleDeleteCancel" title="" width="440" destroy-on-close
            center class="custom-dialog">
            <div class="swal2-header">
                <div class="swal2-icon swal2-question swal2-animate-question-icon"></div>
                <div class="swal2_fs">确认删除？</div>
            </div>
            <div class="swal2_he">ID - {{ currentRow.index }}</div>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="success" class="btn btn-primary" @click="handleDeleteConfirm">
                        确认
                    </el-button>
                    <el-button class="btn" type="" @click="handleDeleteCancel">
                        取消
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </basic-container>
</template>
<script setup lang="ts" name="taskDetail">
import { reactive, ref } from 'vue';
// import {getList} from "@/api/user/overview.js";
import TitleComponent from '@/components/title/index.vue';
import { useRouter } from 'vue-router';
import BasicContainer from '@/components/basic-container/main.vue';

let option: any = reactive({
    height: 'auto',
    calcHeight: 100,
    searchShow: true,
    searchMenuSpan: 6,
    tip: false,
    border: true,
    index: false,
    viewBtn: false,
    editBtn: false,
    delBtn: false,
    addBtn: false,
    dialogWidth: '40%',
    menuFixed: 'right',
    labelWidth: 130,
    gridBtn: false,
    meun: false,
    selection: true,
    searchLabelWidth: 110,
    indexLabel: '序号',
    saveBtnText: '确定',
    refreshBtn: true, // 刷新按钮
    columnBtn: false,
    searchShowBtn: false,
    indexWidth: 60,
    column: [
        {
            label: "编号",
            prop: "index",
            // search: true,
            sortable: true,
            span: 24,
        },
        {
            label: "所属代理",
            prop: "proxy",
            span: 24,
        },
        {
            label: "VIP等级",
            prop: "level",
            span: 24,
        },
        {
            label: "账户",
            prop: "account",
            // search: true,
            span: 24,
        },
        {
            label: "上级",
            prop: "test2",
            span: 24,
        },
        {
            label: "更新时间",
            prop: "test3",
            sortable: true,
            span: 24,
        },
        {
            label: "注册时间",
            prop: "test4",
            sortable: true,
            span: 24,
        },
    ]
})
let crudData: any = reactive({
    loadingSubmit: false,
    loadingSave: false,
    index_unit: [],
    loading: true,
    active: 1,
    page: {
        pageSize: 10,
        currentPage: 1,
    },
    filedArr: [],
    data: []
})



const confirmDeleteVisible = ref(false);
const currentRow = ref({});
const handleCommand = (command, row) => {
    currentRow.value = row;
    if (command === 'edit') {
        router.push({ path: '/user/internalUsers/edit', query: { index: row.index } });
        console.log('edit');
    } else {
        confirmDeleteVisible.value = true;
        console.log('delete');
        console.log('selectedAccount', confirmDeleteVisible.value)
    }
};

const handleDeleteCancel = () => {
    confirmDeleteVisible.value = false;
};

const handleDeleteConfirm = () => {
    confirmDeleteVisible.value = false;
    // 执行删除操作
    console.log('删除记录');
    // 调用API添加实际的删除逻辑
};


// 跳转路由
const router = useRouter();

const handleAdd = () => {
    router.push('/user/internalUsers/add');
}



const onLoad = () => {
    crudData.loading = false;
    crudData.data = [
        {
            index: '662303',
            proxy: '',
            level: 'VIP2',
            account: '88888888',
            test2: '322303',
            test3: '2024-06-18 05:48:04',
            test4: '2023-06-18 05:48:04',
        }
    ]
    crudData.page.total = crudData.data.length;

    // getList().then((res: any) => {
    //     console.log('getReviewLog--', res);
    //     const Data = res.data.data;
    //     // crudData.page.total = Data.total;
    //     crudData.logData = Data;
    //     crudData.loading = false;
    // });
}
</script>
<style scoped lang="scss">
.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-right: 20px;
}

.add-button {
    margin-left: 20px;
}

.el-dialog__wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
}

.custom-dialog {
    display: flex;
    align-items: center;
    justify-content: center;
}

.swal2-header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.swal2-icon {
    position: relative;
    box-sizing: content-box;
    justify-content: center;
    width: 5em;
    height: 5em;
    margin: 1.25em auto 1.875em;
    zoom: normal;
    border: 0.25em solid transparent;
    border-radius: 50%;
    line-height: 5em;
    cursor: default;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.swal2-icon.swal2-question::before {
    content: "?";
}

.swal2-icon::before {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 92%;
    font-size: 3.75em;
}

.swal2-icon.swal2-question {
    border-color: #c9dae1;
    color: #87adbd;
}

.swal2_fs {
    margin: 0 0 0.4em;
    padding: 0;
    font-size: 25px;
    color: #595959;
    text-align: center;
    font-weight: 400 !important;
}

.swal2_he {
    text-align: center;
    color: #545454;
    font-size: 1.125em;
    font-weight: 300;
    line-height: normal;
    word-wrap: break-word;
}

.btn {
    padding: 0.54rem 1.2rem !important;
    height: 34px;
    line-height: 1.2;
    border-radius: 0.2rem;
    cursor: pointer;
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.065),
        0 2px 2px 0 rgba(0, 0, 0, 0.065), 0 1px 5px 1px rgba(0, 0, 0, 0.065);
}

.btn-primary {
    color: #fff;
    background-color: #4e9876;
    border-color: #4e9876;
}

.avue-form__group ::v-deep .el-form-item {
    width: 800px !important;
}
</style>